<style>
    .tab-content > .chart {
        padding: 10px;
    }
    .sm-st-info{
        font-size: 16px;
        margin-bottom: 48px;
    }
    .font_bold{
        font-size: 36px;
        font-weight: bold;
        color: #fff;
    }
    .box-header,.box-body{
        padding: 20px 30px;
    }
    .left_border{
        border-left: 1px solid #fff;
        padding-left: 20px;
    }
    .box,.charts-custom{
        margin-bottom: 100px;
    }
    .charts-custom{
        padding-top: 44px;
    }
    .form-group{
        display: flex;
    }
    .control-label{
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
    }
</style>
<!-- /.row -->
<!-- Main row -->
<div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3">
        <form action="">
            <div class="form-group">
                <label class="control-label">日期</label>
                <input id="birthday" data-rule="" class="form-control datetimerange" autoComplete="off" name="row[year]" type="text" value="{$time}">
            </div>
        </form>

    </div>
    <div class="col-xs-1">
        <input type="button"  id="tj"  class="btn btn-success btn-block" value="查询"/>
    </div>
</div>

<div class="row" style="margin-bottom:5px;">
    <!-- Left col -->
    <!-- /.Left col -->
    <section class="col-lg-7 connectedSortable">

        <!-- Map box -->
        <div class="box box-solid bg-light-blue-gradient">
            <div class="box-header">
                <!-- tools box -->
                <div class="pull-right box-tools">
                </div>
                <!-- /. tools -->

                <i class="fa fa-map-marker"></i>

                <h3 class="box-title">
                    收入统计
                </h3>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-sm-3 col-xs-6">
                        <div class="sm-st clearfix">
                            <div class="sm-st-info">
                                {:__('合计总收入')}
                                <div class="font_bold">{$config.sum}</div>

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 col-xs-6 left_border">
                        <div class="col-sm-6 col-xs-12">
                            <div class="sm-st clearfix">
                                <div class="sm-st-info">
                                    {:__('诊疗总金额')}
                                    <div class="font_bold">{$config.diagnosis}</div>

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="sm-st clearfix">
                                <div class="sm-st-info">
                                    {:__('会员收费')}
                                    <div class="font_bold">{$config.vip}</div>

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xs-12">
                            <div class="sm-st clearfix">
                                <div class="sm-st-info">
                                    {:__('挂号费')}
                                    <div class="font_bold">{$config.registration}</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12">
                            <div class="sm-st clearfix">
                                <div class="sm-st-info">
                                    {:__('周边产品收费')}
                                    <div class="font_bold">{$config.orders}</div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-body-->
        </div>
        <!-- /.box -->

        <!-- solid sales graph -->
        <div class="box box-solid bg-teal-gradient">
            <div class="box-header">
                <i class="fa fa-th"></i>

                <h3 class="box-title">支出统计</h3>

                <div class="box-tools pull-right">
                </div>
            </div>
            <div class="box-body border-radius-none">
                <div class="row">
                    <div class="col-sm-3 col-xs-6">
                        <div class="sm-st clearfix">
                            <div class="sm-st-info">
                                {:__('总支出统计')}
                                <div class="font_bold">{$config.sums}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 col-xs-6 left_border">
                        <div class="col-sm-6 col-xs-12">
                            <div class="sm-st clearfix">
                                <div class="sm-st-info">
                                    {:__('销售费用统计')}
                                    <div class="font_bold">{$config.order}</div>

                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12">
                            <div class="sm-st clearfix">
                                <div class="sm-st-info">
                                    {:__('诊疗成本统计')}
                                    <div class="font_bold">{$config.drug}</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xs-12">
                            <div class="sm-st clearfix">
                                <div class="sm-st-info">
                                    {:__('管理费用统计')}
                                    <div class="font_bold">{$config.administrative}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- /.box-body-->
        </div>
        <!-- /.box -->

    </section>

    <section class="col-lg-5 connectedSortable">
        <!-- Custom tabs (Charts with tabs)-->
        <div class="nav-tabs-custom charts-custom">
            <!-- Tabs within a box -->
            <div class="chart tab-pane" id="area-chart" style="position: relative; height: 300px;"></div>
        </div>
        <div class="nav-tabs-custom charts-custom">
            <!-- Tabs within a box -->
            <div class="chart tab-pane" id="pie-chart" style="position: relative; height: 300px;"></div>
        </div>
        <!-- /.nav-tabs-custom -->

    </section>
    <!-- right col -->
</div>
<!-- /.row (main row) -->

<script src="/assets/img/jquery-3.4.1.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

<script>
    $('#tj').click(function () {
        var year = $("#birthday").val();
        console.log(year);
        //let url = '/BozFPLUfmy.php/statistics/payments/index?ref=addtabs&year='+year;
        let url = '/QjaGeuOTbZ.php/statistics/echarts/index?year='+year;
        //window.top.location.href = url;
        location.href=url;
    })

    $('#birthday').daterangepicker({
        // autoUpdateInput:true,
        timePicker: true, //显示时间
        timePicker24Hour: true, //时间制
        timePickerSeconds: true, //时间显示到秒
        // startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
        startDate: moment().startOf('year'), //设置开始日期
        endDate: moment(new Date()), //设置结束器日期
        maxDate: moment(new Date()), //设置最大日期
        "opens": "center",
        ranges: {
            '今天': [moment().hours(0).minutes(0).seconds(0), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            '上周': [moment().subtract(6, 'days'), moment()],
            '前30天': [moment().subtract(29, 'days'), moment()],
            '本月': [moment().startOf('month'), moment().endOf('month')],
            '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        showWeekNumbers: true,
        locale: {
            format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
            applyLabel: '确定', //确定按钮文本
            cancelLabel: '取消', //取消按钮文本
            customRangeLabel: '自定义',
            daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月'
            ],
            firstDay: 1
        },
        autoUpdateInput:false,
    }, function(start, end, label) {
        timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'),end.format('YYYY-MM-DD HH:mm:ss')];
        // console.log(timeRangeChange);
        $('#birthday').val(timeRangeChange[0]+'~'+timeRangeChange[1]);
    });
</script>